<template>
    <div>
        <h4 class="tagTitle">时间线&ensp; <span v-show="name"><el-tag type="warning" closable @close="closeTag()">{{ name
                    }}</el-tag></span></h4>
        <el-timeline>
            <el-timeline-item v-for="(item, key) in dateMapList" :timestamp="key" placement="top"
                @click="searchYear(key)">
                <div class="dateCss">
                    <ul>
                        <li v-for="op in item" @click.stop="searchMonth(key, op)">{{ op }}</li>
                    </ul>
                </div>
            </el-timeline-item>
        </el-timeline>
    </div>
</template>

<script>
import { ref } from "vue"
export default {
    props: {
        dateMapList: {
            type: Array
        }
    },
    data() {
        return {
            name: ""
        }
    },
    methods: {
        searchYear(year) {
            this.name = year
            this.$emit('searchDate', year)
        },
        searchMonth(year, month) {
            this.name = year + "-" + month
            this.$emit('searchDate', year, month)
        },
        closeTag() {
            this.name = null
            this.$emit('searchDate', "")
        }
    }
}
</script>

<style scoped>
/* @import url(); 引入css类 */
.dateCss {}

.dateCss li:hover {
    cursor: pointer;
    color: #188fffcb;
}
</style>